<template>
  <!-- <h1>功能页面</h1> -->
  <!-- 这个功能页面应该也是使用响应式的 -->
  <!-- 这里使用网格布局实现 -->
  <div id="window">
    <div class="FrameBox">
      <FrameComp></FrameComp>
    </div>

    <div class="OptionList">
      <OptionList></OptionList>
    </div>
  </div>

  <!-- 显示抽屉 -->
  <el-drawer direction="btt" v-model="viewData.friendDrawer" :show-close="false" :size="400">
    <!-- 头部插槽 -->
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">好友信息</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left">
          <CircleCloseFilled />
        </el-icon>
        关闭
      </el-button>
    </template>
    <!-- elementplus生成的描述表格 -->
    <!-- 这个描述表格事实上就是使用h5的表格完成的 -->
    <el-descriptions border>
      <!-- 跨几行显示 -->
      <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
        <el-avatar shape="square" :size="100" :fit="fit" :src="viewData.showFriend.avatarPath" />
      </el-descriptions-item>
      <el-descriptions-item label="用户昵称">{{
        viewData.showFriend.nickname || "空的"
      }}</el-descriptions-item>
      <el-descriptions-item label="用户名称">{{
        viewData.showFriend.username || "空的"
      }}</el-descriptions-item>
      <el-descriptions-item label="用户id">{{
        viewData.showFriend.friendId || "空的"
      }}</el-descriptions-item>
      <el-descriptions-item label="备注">
        {{ viewData.showFriend.remark || "空的" }}
      </el-descriptions-item>
      <el-descriptions-item label="添加时间">
        {{ viewData.showFriend.addTime || "空的" }}
      </el-descriptions-item>
      <el-descriptions-item label="个性签名">
        {{ viewData.showFriend.bio || "空的" }}
      </el-descriptions-item>
      <el-descriptions-item label="个人标签">
        <el-tag size="small">在线达人</el-tag>
        <el-tag size="small">头像收藏家</el-tag>
        <el-tag size="small">五子棋高手！</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button type="success" plain>
          修改备注
          <el-icon>
            <UploadFilled />
          </el-icon>
        </el-button>
        <el-button type="danger" plain>
          删除好友
          <el-icon>
            <Delete />
          </el-icon>
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>
<script setup>
import FrameComp from "@/components/FrameComp.vue";
import OptionList from "@/components/OptionList.vue";

//视图的数据
import useView from "@/store/view.js";
let viewData = useView();
</script>

<style scoped>
#window {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-template-rows: repeat(30, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  width: 100vw;
  height: 100vh;
}

.FrameBox {
  grid-area: 3 / 9 / 29 / 29;
  border-radius: 10px;
  overflow: hidden;

  min-width: 400px;
  min-height: 400px;
}

.OptionList {
  background: #ffffff;
  grid-area: 3 / 2 / 29 / 8;
  border-radius: 10px 10px 5px 5px;

  min-width: 270px;
  min-height: 400px;
}
</style>